﻿@model IEnumerable<kxcxw.Data.Entities.SysItemDetial> 
@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_DictLayout.cshtml";
}
<h2>
    @Html.ActionLink("大类管理", "Index") &raquo; @Html.ActionLink("类别详细信息查看", "Details", null, new { @class = "active" })</h2>
<div id="main">
    <fieldset>
        @(Html.Telerik().TreeView()
        .Name("TreeView")
            .BindTo(Model, (item, employee) =>
            {
                item.Text = employee.itemDetialName;
                item.Value = employee.ItemDeitalID.ToString();
                item.LoadOnDemand = true;
            }
                ).DataBinding(dataBinding => dataBinding
                    .Ajax().Select("_AjaxLoading", "Dict")
                ).ClientEvents(events => events.OnLoad("onLoad"))

            )
    </fieldset>
</div>
<script type="text/javascript">
    function onNodeDrop(e) {
        var dropContainer = $(e.dropTarget).closest('.drop-container');
        var treeview = $('#TreeView').data('tTreeView');
        var nodeText = treeview.getItemText(e.item);
       
        if (dropContainer.length > 0 && dropContainer[0].innerHTML.indexOf(nodeText) == -1) {
            $('<div><strong>' + nodeText + '</strong></div>').hide().appendTo(dropContainer).slideDown('fast');
            e.preventDefault();
        }
    }
</script>
<script type="text/javascript">  
    function onLoad() { 
   
        // subscribe to the contextmenu event to show a contet menu  
        $('.t-in', this).live('contextmenu', function(e) {  
            // prevent the browser context menu from opening  
            e.preventDefault();  
  
            // the node for which the 'contextmenu' event has fired  
            var $node = $(this).closest('.t-item');  
  
            // default "slide" effect settings  
            var fx = $.telerik.fx.slide.defaults();  
  
            // context menu definition - markup and event handling  
            var $contextMenu =  
                $('<div class="t-animation-container" id="contextMenu">' +  
                    '<ul class="t-widget t-group t-menu t-menu-vertical" style="display:none;width:80px">' +  
                      '<li class="t-item" ><a href="#" class="t-link">创建</a></li>' + 
                        '<li class="t-item"><a href="#" class="t-link">编辑</a></li>' +  
                        '<li class="t-item"><a href="#" class="t-link">删除</a></li>' +  
                    '</ul>' +  
                '</div>')  
                .css( //positioning of the menu  
                {  
                    position: 'absolute',  
                    left: e.pageX, // x coordinate of the mouse  
                    top: e.pageY   // y coordinate of the mouse  
                })  
                .appendTo(document.body)  
                .find('.t-item') // select the menu items  
                .mouseenter(function() {  
                    // hover effect  
                    $(this).addClass('t-state-hover');  
                })  
                .mouseleave(function() {  
                    // remove the hover effect  
                    $(this).removeClass('t-state-hover');  
                })  
                .click(function(e) {  
                    e.preventDefault();  
                    // dispatch the click  
                    onItemClick($(this), $node);  
                })  
                .end();  
  
            // show the menu with animation  
            $.telerik.fx.play(fx, $contextMenu.find('.t-group'), { direction: 'bottom' });  
  
            // handle globally the click event in order to hide the context menu  
            $(document).click(function(e) {  
                  
                // if clicked inside the editing textbox - discard  
                if ($(e.target).is('#TreeView :text'))  
                    return;  
  
                // remove any textboxes from the treeview and update the node if needed  
                $('#TreeView :text').each(function() {  
                    var $textBox = $(this);  
                    var newText = $textBox.val();   
                    var oldText = $textBox.data('text');  
                      
                    // the node to which the textbox belongs to  
                    var $node = $textBox.closest('.t-item');  
                      
                    // remove the textbox from the node  
                    $textBox.replaceWith($('<span class="t-in" />').html(newText));  
                      
                    // if the text changed update the node  
                    if (newText != oldText) {  
                        onEdit($node);  
                    }  
                });  
  
                // hide the context menu and remove it from DOM  
                $.telerik.fx.rewind(fx, $contextMenu.find('.t-group'), { direction: 'bottom' }, function() {  
                    $contextMenu.remove();  
                });  
            });  
        });  
    }  


      
   function onItemClick($item, $node) {  
        var treeView = $('#TreeView').data('tTreeView');  
        var nodeText = treeView.getItemText($node);  
        var menuItemText = $item.text();  
 
       if (menuItemText == "编辑") {  
            // replace the node contents with a textbox  
          setTimeout(function() {  
              $node.find('.t-in:first')  
                   .replaceWith($('<input type="text" />')  
                       .val(nodeText)  
                       .data('text', nodeText)  
                       .keydown(function(e) {  
                           if (e.keyCode == 13) {  
                              // handle enter key - edit the node  
                                 
                               var newText = $(this).val();  
                                // remove the textbox from the node  
                                $(this).replaceWith($('<span class="t-in"/>').html(newText));  
                                  
                                if (newText != nodeText) {  
                                 
                                   // if the text changed update the node  
                                   onEdit($node);
                               }  
                             
                            } else if (e.keyCode == 27) {  
                               // handle escape key - cancel editing  
                                 
                              // remove the textbox from the node  
                                $(this).replaceWith($('<span class="t-in"/>').html(nodeText));  
                           }  
                          
                          
                       }))  
            }, 0);  
        } else if (menuItemText == "删除") {  
           //delete the node  
            onDelete($node);  
        }  
        else if(menuItemText=="创建")
        {
             onCreate($node);
        }
    }  
 
    function onEdit($node) {  
       var treeView = $('#TreeView').data('tTreeView');  
       
     // post to HomeController.EditNode using jQuery  
       $.post('@Url.Action("EditNode", "Dict")',  
           {  
               level: $node.parents('.t-item').length, // node level required to determine whether this is a Category or a Product  
               id: treeView.getItemValue($node),  
               text: treeView.getItemText($node) , 
           }  
        );  
   }  

    function onCreate($node) {  
       var treeView = $('#TreeView').data('tTreeView');  
       window.location.href="/Admin/Dict/CreateDictDetial/"+treeView.getItemValue($node);
     // post to HomeController.EditNode using jQuery  
     
   }  
  
    function onDelete($node) {  
       var treeView = $('#TreeView').data('tTreeView');  
         
       if (confirm('Are you sure you want to delete this node?')) {  
             
           // post to HomeController.DeleteNode using jQuery  
           $.post('@Url.Action("DeleteNode", "Dict")',  
          {  
               level: $node.parents('.t-item').length,  
               id: treeView.getItemValue($node),  
            });  
              
            $node.remove();  
        }  
    }  
     
</script>
